<script lang="ts" setup>
	import { areaListUrl, dictList, getExpertList, getOrgList, getSrvsysList } from '~/api/home'
	import { decode, encode } from '~/utils/base/dataEncry'

	const list = ref<any[]>([])
	const keshiList = ref<any[]>([])
	const doctorLevelList = ref<any[]>([])
	const jgLevelList = ref<any[]>([])
	const jgNameList = ref<any[]>([])
	const areaList = ref<any[]>([])
	const srvsysList = ref<any[]>([])
	const jgList = ref<any[]>([])
	const TJlist = ref<any[]>([])
	const title = ref('人物库')
	const routePath = [{ name: '首页', path: '/' }, { name: title }]
	const inputVal = ref('')
	const filterModel = ref<any[]>([])
	const total = ref(0)
	const currentCate = ref('')
	var filterList = [
		//   {
		//   label: '专家类别',
		//   value: '',
		//   key: 'category',
		//   options: [
		//     {
		//       label: '科普专家',
		//       value: '科普专家',
		//     },
		//     {
		//       label: '中医',
		//       value: '中医',
		//     },
		//     {
		//       label: '疾控',
		//       value: '疾控',
		//     },
		//     {
		//       label: '食品安全',
		//       value: '食品安全',
		//     },
		//   ],
		// },
		// {
		// 	// label: '属地',
		// 	label: '专业领域',
		// 	value: '',
		// 	key: 'srvsys',
		// 	// options: [
		// 	//   {
		// 	//     label: '省级',
		// 	//     value: '省级',
		// 	//   },
		// 	//   {
		// 	//     label: '市级',
		// 	//     value: '市级',
		// 	//   },
		// 	//   {
		// 	//     label: '区域级',
		// 	//     value: '区域级',
		// 	//   },
		// 	// ],
		// 	options: srvsysList.value,
		// },
		{
			label: '属地',
			value: '',
			key: 'dependency',
			options: [
			  {
			    label: '省级',
			    value: '省级',
			  },
			  {
			    label: '市级',
			    value: '市级',
			  },
			  {
			    label: '区域级',
			    value: '区域级',
			  },
			],
		},
		{
			label: '区域',
			value: '',
			key: 'area_name',
			options: areaList.value,

		},
		// {
		// 	label: '机构属性',
		// 	value: '',
		// 	key: 'organ_classify',
		// 	options: jgList.value,
		// },
		// {
		// 	label: '医院等级',
		// 	value: '',
		// 	key: 'initial',
		// 	options: jgLevelList.value,

		// },
		// {
		// 	label: '科室筛选',
		// 	value: '',
		// 	key: 'department_name',
		// 	options: keshiList.value,

		// },
		// {
		// 	label: '医生职称',
		// 	value: '',
		// 	key: 'position',
		// 	options: doctorLevelList.value,

		// },
		// {
		// 	label: '机构名称',
		// 	value: '',
		// 	key: 'organ_name',
		// 	options: jgNameList.value,
		// },
	]
		let charArray = [];

	// 使用循环从 'a' 到 'z'
			for (let i = 97; i <= 122; i++) {
				charArray.push(String.fromCharCode(i));
			}
			let zimo={
				label: '首字母',
				value: '',
				key: 'initial',
				options: charArray.map((item) => ({label: item, value: item}))
			}
		filterList.push(zimo)
	const queryParamsDict1 = reactive(
		{
			page: {
				rownumber: 3000,
				pageNo: 1,
			},
			condition: [
				{
					colName: 'dict_type',
					ruleType: 'eq',
					value: 'jigou-01',
				},
			],
			positions: '首页',
		},
	)
	const queryParamsDict3 = reactive(
		{
			page: {
				rownumber: 3000,
				pageNo: 1,
			},
			condition: [
				{
					colName: 'dict_type',
					ruleType: 'eq',
					value: 'jigou-03',
				},
			],
			positions: '首页',
		},
	)
	const queryParamsDict2 = reactive(
		{
			page: {
				rownumber: 3000,
				pageNo: 1,
			},
			condition: [
				{
					colName: 'dict_type',
					ruleType: 'eq',
					value: 'keshi',
				},
			],
			positions: '首页',
		},
	)
	const queryParamsDictN = reactive(
		{
			page: {
				rownumber: 3000,
				pageNo: 1,
			},
			condition: [
				{
					colName: 'dict_type',
					ruleType: 'eq',
					value: 'zhuanyelingyu',
				},
			],
			positions: '首页',
		},
	)
	const queryParamsDict4 = reactive(
		{
			page: {
				rownumber: 3000,
				pageNo: 1,
			},
			condition: [
				{
					colName: 'dict_type',
					ruleType: 'eq',
					value: 'zhicheng',
				},
			],
			positions: '首页',
		},
	)
	const queryParams = reactive(
		{
			page: {
				rownumber: 12,
				pageNo: 1,
			},
			condition: [],
			positions: '首页',
		},
	)
	// 分页参数更改
	function onPageChange(params : { pageNum : number, pageSize : 12 }) {
		queryParams.page.pageNo = params.pageNum
		queryParams.page.rownumber = 12
		getData()
	}
	function clickItem(item : any) {
		console.log(item.Id)
		getExpertList({
			condition: [{ colName: 'uid', ruleType: 'eq', value: item.uid }],
		}).then((res) => {
			navigateTo({
				path: `/peopleHealth/ExpertListDetail`,
				query: {
					data: encode(res.data[0]),
				},
			})
		})
	}
	function getData() {
		const { cloned } = useCloned(queryParams)
		if (inputVal.value) {
			cloned.value.relation_condition = {
				relation: 'OR',
				data: [
					{
						colName: 'name',
						ruleType: 'like',
						value: inputVal.value,
					},
					{
						colName: 'category',
						ruleType: 'like',
						value: inputVal.value,
					},
					{
						colName: 'dependency',
						ruleType: 'like',
						value: inputVal.value,
					},
					{
						colName: 'department_name',
						ruleType: 'like',
						value: inputVal.value,
					},
					{
						colName: 'initial',
						ruleType: 'like',
						value: inputVal.value,
					},
					{
						colName: 'organ_classify',
						ruleType: 'like',
						value: inputVal.value,
					},
					{
						colName: 'organ_name',
						ruleType: 'like',
						value: inputVal.value,
					},
					{
						colName: 'position',
						ruleType: 'like',
						value: inputVal.value,
					},
					{
						colName: 'area_name',
						ruleType: 'like',
						value: inputVal.value,
					},
				],
			}
		}
		getExpertList(cloned.value).then((res) => {
			total.value = res.page.total
			list.value = res.data
		}).catch(() => {
		})
	}
	function getTJData() {
		getExpertList(queryParams).then((res) => {
			total.value = res.page.total
			TJlist.value = res.data.slice(0, 3)
		}).catch(() => {
		})
	}
	function getDict() {
		dictList(queryParamsDictN).then((res) => {
			res.data.sort((a,b) => a.seq - b.seq);
			res.data.forEach((item) => {
				srvsysList.value.push({
					label: item.value,
					value: item.value,
				})
			})
		})
		dictList(queryParamsDict2).then((res) => {
			res.data.forEach((item) => {
				keshiList.value.push({
					label: item.value,
					value: item.value,
				})
			})
		})
		dictList(queryParamsDict1).then((res) => {
			res.data.forEach((item) => {
				jgList.value.push({
					label: item.value,
					value: item.value,
				})
			})
		})
		dictList(queryParamsDict3).then((res) => {
			res.data.forEach((item) => {
				jgLevelList.value.push({
					label: item.value,
					value: item.value,
				})
			})
		})
		dictList(queryParamsDict4).then((res) => {
			res.data.forEach((item) => {
				doctorLevelList.value.push({
					label: item.value,
					value: item.value,
				})
			})
		})
	}
	function getArea() {
		const req = {
			condition: [
				{
					colName: 'area_name',
					ruleType: '[like',
					value: '市',
				},
			],
		}
		areaListUrl(req).then((res) => {
			console.log(res.data, 1111)
			res.data.forEach((item) => {
				areaList.value.push({
					label: item.area_name,
					value: item.area_name,
				})
			})
		})
		getOrgList({ page: { pageNo: 1, rownumber: 100 } }).then((res) => {
			res.data.forEach((item) => {
				jgNameList.value.push({
					label: item.organ_name,
					value: item.organ_name,
				})
			})
		})
	}
	onMounted(() => {
		getDict()
		getArea()
		getData()
		getTJData()
	})
	function onFilter(model : any) {
		// queryParams.condition = []
		// if (model.dependency && model.dependency != '') {
		//     queryParams.condition.push({
		//         "colName": "dependency",
		//         "value": model.dependency,
		//         "ruleType": "eq"
		//     })
		// }
		// if (model.department_name && model.department_name != '') {
		//     queryParams.condition.push({
		//         "colName": "department_name",
		//         "value": model.department_name,
		//         "ruleType": "eq"
		//     })
		// }
		// if (model.initial && model.initial != '') {
		//     queryParams.condition.push({
		//         "colName": "initial",
		//         "value": model.initial,
		//         "ruleType": "eq"
		//     })
		// }
		// if (model.organ_classify && model.organ_classify != '') {
		//     queryParams.condition.push({
		//         "colName": "organ_classify",
		//         "value": model.organ_classify,
		//         "ruleType": "eq"
		//     })
		// }
		// if (model.organ_name && model.organ_name != '') {
		//     queryParams.condition.push({
		//         "colName": "organ_name",
		//         "value": model.organ_name,
		//         "ruleType": "eq"
		//     })
		// }
		// if (model.position && model.position != '') {
		//     queryParams.condition.push({
		//         "colName": "position",
		//         "value": model.position,
		//         "ruleType": "eq"
		//     })
		// }
		// if (model.area_name && model.area_name != '') {
		//     queryParams.condition.push({
		//         "colName": "area_name",
		//         "value": model.area_name,
		//         "ruleType": "eq"
		//     })
		// }
		// if (inputVal.value && inputVal.value != '') {
		//     queryParams.condition.push({
		//         "colName": "name",
		//         "value": inputVal.value,
		//         "ruleType": "eq"
		//     })
		// }

		filterModel.value = model
		console.log(filterModel.value)
		// getData()
		onSearch()
	}

	function clearInput() {
		inputVal.value = ''
	}
	// 搜索
	function onSearch() {
		queryParams.condition = []
		if (filterModel.value.category && filterModel.value.category != '') {
			queryParams.condition.push({
				colName: 'category',
				value: filterModel.value.category,
				ruleType: 'like',
			})
		}
		if (filterModel.value.srvsys && filterModel.value.srvsys != '') { // 属地
			queryParams.condition.push({
				colName: 'appointment_time',
				value: filterModel.value.srvsys,
				ruleType: 'eq',
			})
		}
		if (filterModel.value.dependency && filterModel.value.dependency != '') { // 属地
			queryParams.condition.push({
				colName: 'dependency',
				value: filterModel.value.dependency,
				ruleType: 'eq',
			})
		}
		if (filterModel.value.department_name && filterModel.value.department_name != '') {
			queryParams.condition.push({
				colName: 'department_name',
				value: filterModel.value.department_name,
				ruleType: 'eq',
			})
		}
		if (filterModel.value.department_name && filterModel.value.department_name != '') {
			queryParams.condition.push({
				colName: 'department_name',
				value: filterModel.value.department_name,
				ruleType: 'eq',
			})
		}
		if (filterModel.value.initial && filterModel.value.initial != '') {
			queryParams.condition.push({
				colName: 'initial',
				value: filterModel.value.initial,
				ruleType: 'eq',
			})
		}
		if (filterModel.value.organ_classify && filterModel.value.organ_classify != '') {
			queryParams.condition.push({
				colName: 'organ_classify',
				value: filterModel.value.organ_classify,
				ruleType: 'eq',
			})
		}
		if (filterModel.value.organ_name && filterModel.value.organ_name != '') {
			queryParams.condition.push({
				colName: 'organ_name',
				value: filterModel.value.organ_name,
				ruleType: 'eq',
			})
		}
		if (filterModel.value.position && filterModel.value.position != '') {
			queryParams.condition.push({
				colName: 'position',
				value: filterModel.value.position,
				ruleType: 'eq',
			})
		}
		if (filterModel.value.area_name && filterModel.value.area_name != '') {
			queryParams.condition.push({
				colName: 'area_name',
				value: filterModel.value.area_name,
				ruleType: 'like',
			})
		}
		// if (inputVal.value && inputVal.value != '') {
		//   queryParams.condition.push({
		//     colName: 'name',
		//     value: inputVal.value,
		//     ruleType: 'eq',
		//   })
		// }
		//    inputVal.value
		getData()
	}
</script>

<template>
	<div>
		<!-- <PublicSearch type="全部" /> -->
		<!-- <PublicSearchDialog type="全部" /> -->
		<!-- <div class="mx-auto w-900px pt-34px text-18px text-white">
			<span>主办单位：陕西省卫生健康委员会
			</span>
			<span class="ml-50px">承办单位：陕西省健康教育中心</span>
		</div> -->
		<div class="">
			<div class="mb-120px">
				<div class="relative mx-auto  w-900px flex items-center p-t-4rem">
					<div class=" h-70px flex flex-1 items-center bg-#fff p-y-5px">
						<input v-model="inputVal" placeholder="请输入搜索信息" class="min-w-0 flex-1 indent-16px outline-none">
						<i class="i-ri:close-circle-line cursor-pointer text-gray opacity-0"
							:class="{ 'opacity-100': inputVal }" @click="clearInput" />
					</div>
					<div class="mr-10px h-70px w-120px flex cursor-pointer items-center justify-center text-20px text-#FFF"
						style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,#AC8358 89.45%);"
						@click="onSearch">
						<!-- <i class="i-ri:search-line cursor-pointer text-#fff w-25px h-25px" /> -->
						搜索
					</div>
				</div>
				<!-- <div class="flex items-center pl-120 " :style="color:#fff">
                    <div>热门搜索：</div>
                    <span v-for="item in hotSearch" class="cursor-pointer pl-2" hover="text-#AC8358"
                        @click="hotSearchClick(item)">{{ item }}</span>
                </div> -->
			</div>
		</div>
		<div class="px-40">
			<div class="bg-#fff">
				<CommonPageContainer :title="title" :path="routePath">
					<div class="mt-20px flex justify-between">
						<div class="flex-1">
							<PublicFilter class="bg-#FFF" :filter-list="filterList" :multi-select="true"
								show-type="page" @change="onFilter" />
							<div class="grid grid-cols-[repeat(auto-fit,_minmax(150px,_1fr))] gap-3">
								<div v-for="item in list" class="relative cursor-pointer p-2" border="1px solid #eee"
									hover="text-#AC8358" @mouseleave="currentCate = ''"
									@mousemove="currentCate = item.name" @click="clickItem(item)">
									<!-- <div class="w-45px rounded-tl-10px rounded-br-10px absolute top-2 left-2 text-center"
                                        style="background: linear-gradient(-44deg, rgba(251,165,28,1) -1.24%,rgba(251,165,165,1) 98.64%);color:#fff;font-size: 14px;">
                                        {{ item.initial }}
                                    </div> -->
									<div class="w-100% flex justify-center">
										<img class="h-88px w-88px" :src="getImgUrl(item.personal_img)"
											style="border-radius: 44px;" alt=""
											:class="{ active: currentCate === item.name }">
									</div>
									<div class="flex justify-center py-10px">
										<span class="pr-2 font-bold" text="14px">{{ item.name }}</span>
										<span
											style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,#AC8358 89.45%);border-radius: 3px;"
											text="#fff 14px">{{ item.position }}</span>
									</div>
									<div class="text-center" text="#AEAEB2 14px">
										{{ item.organ_name }}
									</div>
								</div>
							</div>
							<PublicPagination :page-size="12" :total="total" @change="onPageChange" />
						</div>
						<div class="ml-20px w-180px">
							<div>
								<div class="h-40px flex items-center rounded-tl rounded-tr px-10px py-5px"
									style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,#AC8358 89.45%);">
									<img src="/img/tj.png" alt="">
									<div class="pl-15px" text="#fff 16px">
										推荐
									</div>
								</div>
								<div class="w-100% rounded-bl rounded-br" border="2px solid #AC8358">
									<div v-for="item in TJlist" class="w-100% flex cursor-pointer justify-between p-2"
										hover="text-#AC8358" @click="clickItem(item)">
										<img class="inline-block w-50% max-h-200px" :src="getImgUrl(item.personal_img)" alt="">
										<div class="w-58%">
											<div class="flex justify-between">
												<div class="" text="12px">
													{{ item.name }}
												</div>
												<!-- <div class="p-1px"
													style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,#AC8358 89.45%);border-radius: 3px;"
													text="#fff 12px">
													咨询
												</div> -->
											</div>
											<div text="12px" class="py-2">
												{{ item.organ_name }}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</CommonPageContainer>
			</div>
		</div>
	</div>
</template>

<style scoped>
	.active {
		border: 4px solid #AC8358;
	}
</style>